import React, { Component } from 'react'

export default class Home extends Component {
    constructor(props) {
        super(props);
        this.state={
            t: 'sdfsdf',
            test: 'lyx'
        }
    }
    choo(){
        console.log('choo');
    }
    changeText(e){
        console.log(e.target);
        this.setState({
            t:'luyouxin',
            test: 'test'
        },()=>{
            console.log('state',this.state);
        });
    }    
    render() {        
        return (
            <div>
                <Choo name={this.state.t} log={this.choo}/>
                <RenderADOM testContent={this.state.test}/>
                <button onClick={(e)=>this.changeText(e)}>改变我的state</button>
            </div>
        )  
    }
}

class Choo extends Component {
    constructor(props) {
        super(props);
        console.log(props);
        this.state={
            name : props.name,
        }
        this.change = this.change.bind(this);
        props.log();
    }
    change(t){
        this.setState({
            name:t
        })
    }
    render() {
        return (
            <div>
                {this.props.name}
            </div>
        );
    }
}

class RenderADOM extends Component {
    constructor(props) {
        super(props);
        this.state={
            testContent : props.testContent,
        }        
    }
    render() {
        if( this.props.testContent === 'lyx'){
            return (
                <div>
                    {this.props.testContent}
                </div>
            )
        } else {
                 return (
                <div>
                    test suceeseful
                </div>
            )
        }
    }
}
